<template>
    <view>
        <view>
            <u--form>
                <view style="width: 100%; background-color:rgb(247,247,247);">
                    <u-icon name="arrow-left" color="#2979ff" size="28" @click="back"></u-icon>
                </view>
                <u-cell style="background-color: rgb(247,247,247);" title="真实姓名" :right-icon="rightIcon"></u-cell>
                <u--input placeholder="请输入姓名" border="surround" v-model="formData.name"></u--input>

                <u-cell style="background-color: rgb(247,247,247);" title="年龄" :right-icon="rightIcon"></u-cell>
                <u--input placeholder="请输入年龄" border="surround" v-model="formData.age"></u--input>

                <!-- 性别选择部分 -->
                <u-cell style="background-color: rgb(247,247,247);" title="性别" :right-icon="null">
                    <template #right-icon>
                        <u-radio-group v-model="formData.gender" iconPlacement="right" style="display: flex; gap: 20rpx;">
                            <u-radio activeColor="rgb(79,108,253)" name="male">男</u-radio>
                            <u-radio activeColor="rgb(79,108,253)" name="female">女</u-radio>
                        </u-radio-group>
                    </template>
                </u-cell>

                <u-cell style="background-color: rgb(247,247,247);" title="出生日期" :right-icon="rightIcon" @click="showCalendar">
                    <!-- 显示已选择的日期 -->
                    <template #right-icon>
                        <view>{{ formData.birthday || '请选择日期' }}</view>
                    </template>
                </u-cell>
                <u-calendar
                    :show="show"
                    :mode="single"
                    :min-date="minDate"
                    :max-date="maxDate"
                    :monthNum="monthNum"
                    @confirm="confirm"
                    @close="closeCalendar"
                ></u-calendar>

                <u-cell style="background-color: rgb(247,247,247);" title="手机" :right-icon="rightIcon"></u-cell>
                <u--input placeholder="请输入手机号" border="surround" v-model="formData.phone"></u--input>

                <u-cell style="background-color: rgb(247,247,247);" title="年级" :right-icon="rightIcon"></u-cell>
                <u--input placeholder="请输入年级" border="surround" v-model="formData.grade"></u--input>

                <view style="margin-top: 10px;"></view>
                <button type="primary" @click="submitForm">提交</button>
            </u--form>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            rightIcon: "arrow-right",
            formData: {
                name: "",
                age: "",
                gender: "male",
                birthday: "",
                phone: "",
                grade: ""
            },
            show: false,
            mode: 'date',
            // 设置最小日期为较早的日期
            minDate: '2000-01-01',
            monthNum:'120'
        };
    },
    methods: {
        back() {
            uni.reLaunch({
                url: '/pages/Demo4/Demo4'
            });
        },
        showCalendar() {
            this.show = true;
        },
        closeCalendar() {
            this.show = false;
        },
        confirm(e) {
            // 假设 e 是一个数组，并且我们只需要数组中的第一个元素作为日期
            if (Array.isArray(e) && e.length > 0) {
                this.formData.birthday = e[0];
            } else {
                // 如果 e 不是数组或者数组为空，直接使用 e 作为日期
                this.formData.birthday = e;
            }
            this.show = false;
        },
        submitForm() {
            // 打印表单数据到控制台
            console.log("表单提交数据：", this.formData);

            // 这里可以添加表单验证和提交逻辑
            // uni.request({...})
        }
    }
};
</script>

<style>
.u-cell__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>